import arrorIcon from '@/assets/images/icon_jump.png';
import { DynamicColors, GDynamicValue, GStyleSheet } from '@/utils/DarkMode';
import { Image, Text, View } from '@tarojs/components';
import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
import withPressWhenLoggedIn from '../withPressWhenLoggedIn';

const dstyles = GStyleSheet.create({
  container: {
    padding: '15px 16px',
    backgroundColor: DynamicColors.cardBackgroundColor,
    justifyContent: 'space-between',
    borderBottomWidth: 1,
    borderBottomColor: DynamicColors.borderBottomColor,
    borderBottomStyle: 'solid',
    position: 'relative',
  },
  titleBox: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    marginRight: 10,
    marginLeft: 4,
  },
  text: {
    fontSize: 16,
    color: DynamicColors.normalTextColor,
  },
  extra: {
    justifyContent: 'flex-end',
    flex: 1,
    paddingLeft: 20,
  },
  arrow: {
    color: new GDynamicValue('#888', '#ccc'),
    marginLeft: 10,
  },
  arrorIcon: {
    tintColor: new GDynamicValue('#888', '#ccc'),
    marginLeft: 10,
    width: 16,
    height: 16,
  },
  disabledCover: {
    position: 'absolute',
    height: '100%',
    width: '100%',
    // left: 20,
    backgroundColor: 'rgba(255,255,255,0.7)',
  },
});

interface IProps extends PropsWithChildren {
  onPress?: () => void;
  extra?: ReactNode;
  arrow?: boolean;
  icon?: any;
  style?: CSSProperties;
  disabled?: boolean;
  noBorderBottom?: boolean;
  rightIcon?: any;
  renderFooter?: ReactNode;
  extraStyle?: CSSProperties;
  contentStyle?: CSSProperties;
}

const ListItem: React.FC<IProps> = React.memo(
  ({
    children,
    onPress,
    extra,
    arrow,
    icon,
    style,
    disabled = false,
    noBorderBottom,
    rightIcon,
    renderFooter,
    contentStyle,
    extraStyle,
    ...reset
  }) => {
    const styles = dstyles.useDynamicStyle();
    const content = [
      <View key='title' style={{ ...styles.titleBox, ...contentStyle }}>
        {icon ? (
          <View style={styles.icon} className='centerFlex'>
            {icon}
          </View>
        ) : null}
        {typeof children === 'string' ? <Text style={styles.text}>{children}</Text> : children}
      </View>,
    ];
    if (extra || arrow) {
      content.push(
        <View key='extra' style={{ ...styles.extra, ...extraStyle }} className='centerFlex'>
          {extra}
          {arrow && <Image src={arrorIcon} style={styles.arrorIcon} />}
        </View>
      );
    }

    const parent = () => {
      const s = noBorderBottom ? { borderBottomWidth: 0 } : {};
      const sty = { ...styles.container, ...s, ...style };
      return onPress ? (
        <View {...reset} style={sty} onClick={disabled ? () => {} : onPress}>
          <View className='itemsCenter'>
            {content}
            {disabled && <View style={styles.disabledCover} />}
            {rightIcon && rightIcon}
          </View>

        {renderFooter}
      </View>
    ) : (
      <View {...reset} style={sty}>
        <View className='itemsCenter'>
          {content}
          {disabled && <View style={styles.disabledCover} />}
        </View>
        {renderFooter}
      </View>
    );
  };
  return parent();
});

export const ListItemWhenLoggedIn = withPressWhenLoggedIn(ListItem);

export default ListItem;
